import React, { useState } from "react";
import { Link } from "react-router-dom";
import route from "../../router";
import { useNavigate } from "react-router-dom";

import {
  CarOutlined,
  OrderedListOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Button, Menu } from "antd";

export const MenuCom = () => {
  let createMeun = (route: any=[]) => {
    let arr: any = [];
    route.forEach((p: any) => {
      // console.log(p);
      let obj = {
        key: p.key,
        label: p.label,
        children: p.children,
      };
      // console.log(obj);

      if (p.children && p.children.length > 0) {
        // console.log(p.children);

        createMeun(p.children);
      }
      arr.push(obj);
    });

    return arr;
  };

  // 优化router
  let allroute= route.filter(p=>{
    return p.path==="/"
  }).filter(p=>p.children)
  
  console.log(allroute[0].children);

  let items = createMeun(allroute[0].children);
  // console.log(items);

  let navigate = useNavigate();

  let navigateHandler = (item: any) => {
    // console.log(item);
    let p = item.keyPath.reverse().join("/");
    let path = "/" + p;
    navigate(path);
  };

  return (
    <div style={{ width: 200 }}>
      <Menu
        defaultSelectedKeys={["1"]}
        // defaultOpenKeys={["sub1"]}
        mode="inline"
        onClick={navigateHandler}
        theme="dark"
        // inlineCollapsed={false}
        items={items}
      />
    </div>
  );
};
